<template>
  <div class="buy">
    <div class="container">
      <div class="header">
        <h2>{{$t('tobuy.main[0]')}}</h2>
        <h3>{{$t('tobuy.main[1]')}}</h3>
      </div>
      <div class="input_box">
        <div class="item">
          <div class="label">{{$t('tosell.main[2]')}}</div>
          <div class="input">
            <input  :placeholder="$t('tosell.tips[2]')" v-model="price">
            <span>CNY</span>
          </div>
        </div>
        <div class="item">
          <div class="label">{{$t('tosell.main[3]')}} </div>
          <div class="input">
            <input :placeholder="$t('tosell.tips[3]')" v-model="number">
            <span>USDT</span>
          </div>
        </div>
        <div class="item">
          <div class="label">{{$t('tosell.main[4]')}}</div>
          <div class="row">
            <div class="input">
              <input type="number" :placeholder="$t('tosell.tips[4]')" v-model="max">
              <span>CNY</span>
            </div>
            <div class="input">
              <input type="number" :placeholder="$t('tosell.tips[5]')" v-model="min">
              <span>CNY</span>
            </div>
          </div>
        </div>
        <div class="payway">
          <div class="label">{{$t('tosell.main[5]')}}</div>
          <div class="tabs">
            <div class="tab_item" v-if="bank" :class="{active:openBank}" @click="openBank=!openBank">
              <img src="../../assets/img/icon-yinlian.png" alt="">{{$t('tosell.main[6]')}}
            </div>
            <div class="tab_item" v-if="ali" :class="{active:openAli}" @click="openAli=!openAli">
              <img src="../../assets/img/icon-alipay.png" alt="">{{$t('tosell.main[7]')}}
            </div>
            <div class="tab_item" v-if="weixin" :class="{active:openWx}" @click="openWx=!openWx">
              <img src="../../assets/img/icon_weixin.png" alt="">{{$t('tosell.main[8]')}}
            </div>
          </div>
        </div>
        <div class="item">
          <div class="label">{{$t('tosell.main[9]')}}</div>
          <div class="input">
            <input type="text" :placeholder="$t('tosell.tips[10]')" v-model="remark">
            <!-- <span>CNY</span> -->
          </div>
        </div>
        <div class="btn"><el-button type="primary" @click="submitForm()">{{$t('tobuy.main[2]')}}</el-button></div>
      </div>
    </div>
    <div class="trade_list">
      <div class="title">
        <span>{{$t('tobuy.main[3]')}}</span>
        <router-link to="/applyorder">{{$t('tobuy.main[4]')}}</router-link>
      </div>
      <el-table :data="tradelist.data" style="width: 100%">
        <el-table-column prop="order_no" :label="$t('tosell.list[2]')" align="center" width="220px"></el-table-column>
        <el-table-column prop="trans_num" :label="$t('tosell.list[3]')" align="left"></el-table-column>
        <el-table-column prop="surplus_num" :label="$t('tosell.list[4]')" align="left"></el-table-column>
        <el-table-column prop="total_price" :label="$t('tosell.list[5]')" align="left"></el-table-column>
        <el-table-column prop="price" :label="$t('tosell.list[6]')" align="left"></el-table-column>
        <el-table-column prop="created_at" :label="$t('tosell.list[7]')" align="left"></el-table-column>
        <el-table-column prop="name" :label="$t('tosell.list[8]')" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="small" v-if="scope.row.status==1" @click="cancelOrder(scope.row.order_no)">{{$t('tosell.list[9]')}}</el-button>
            <el-button type="text" size="small" v-if="scope.row.status==2">{{$t('tosell.list[10]')}}</el-button>
            <el-button type="text" size="small" v-if="scope.row.status==3">{{$t('tosell.list[11]')}}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :title="$t('tosell.main[11]')" width="40%" top="25vh" center :visible.sync="showDialog">
      <el-form :model="form">
        <el-form-item :label="$t('tosell.main[12]')">
          <el-input v-model="form.password" type="password" :placeholder="$t('tosell.tips[6]')" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDialog = false">{{$t('tosell.main[13]')}}</el-button>
        <el-button type="primary" @click="submit">{{$t('tosell.main[14]')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { Hidephone ,Passwordencryption} from "@/libs/util";
  import { issueorderlist, commondata , paylist, revokeorder, accountinfo } from "@/api/fbTrade";
export default {
  name: 'buy',
  data () {
    return {
      price: '',
      number: '',
      min: '',
      max: '',
      remark: '',
      tradelist: {
        data: []
      },
      showDialog: false,
      form:{
        password: ''
      },
      paylist: [],
      openBank: true,
      openAli: true,
      openWx: true,
      useraccount: {}
    }
  },
  watch: {
    "price": function(val, oval){
        if(isNaN(Number(val))){
          this.price = oval;
          return false;
        } else {
          if(val.toString().indexOf('.') != -1 && val.toString().split(".")[1].length > 2){
						this.price = oval;
						this.$message.error(this.$t('tosell.tips[0]'), 'warning', this);
						return false;
					}
        }
    },
    "number": function(val, oval){
        if(isNaN(Number(val))){
          this.number = oval;
          return false;
        } else {
          if(val.toString().indexOf('.') != -1 && val.toString().split(".")[1].length > 4){
						this.number = oval;
						this.$message.error(this.$t('tosell.tips[1]'), 'warning', this);
						return false;
					}
        }
    },
  },
  computed:{
    bank(){
      for (let item of this.paylist) {
        if(item.payment_type==1) return true
      }
      return false
    },
    ali(){
      for (let item of this.paylist) {
        if(item.payment_type==2) return true
      }
      return false
    },
    weixin(){
      for (let item of this.paylist) {
        if(item.payment_type==3) return true
      }
      return false
    }
  },
  created() {
    this.getList();
    this.getpaylist();
    this.getprice();
    this.accountinfo();
  },
  methods:{
    getList(){
      let _data1 = {
          order_type: "2",
      };
      issueorderlist(_data1).then((res) => {
          
            this.tradelist = res 
           
      });
    },
    getpaylist(){ //支付方式
      paylist({status: '1'}).then((res) => {
         
          if(res.length==0){
          this.$message.error('请先设置支付方式');
          this.$router.push('/payways')
          }
          this.paylist = res
         
      }); 
    },
    getprice(){ //默认价格
      commondata().then((res) => {
         
          this.price = res.mark_price
         
      });
    },
    accountinfo(){
      accountinfo({account: '3'}).then((res) => {
         
          this.useraccount = res
         
      });
    },
    submitForm(){
      if( !this.price){
        this.$message.error(this.$t('tosell.tips[2]'));
        return false;
      } else if( !this.number){
        this.$message.error(this.$t('tosell.tips[3]'));
        return false;
      } else if( !this.max){
        this.$message.error(this.$t('tosell.tips[4]'));
        return false;
      } else if( !this.min){
        this.$message.error(this.$t('tosell.tips[5]'));
        return false;
      } else  if(Number(this.min) > Number(this.max)){
        this.$message.error(this.$t('tosell.tips[8]'));
        return false;
      } else if(Number(this.min) < Number(this.price)){
        this.$message.error(this.$t('tosell.tips[9]'));
        return false;
      } else {
        this.showDialog = true
      }

    },
    submit(){
      if( !this.form.password){
        this.$message.error(this.$t('tosell.tips[6]'));
        return false;
      }
      let data = {
        order_type: '2',
        wid: '1',
        min_price: this.min,
        max_price: this.max,
        trans_num: this.number,
        price: this.price,
        payment_password: this.form.password,
        notes: this.remark,
        pay_method: ''
      }
      let arr = []
      if(this.bank&&this.openBank) arr.push(1)
      if(this.ali&&this.openAli) arr.push(2)
      if(this.weixin&&this.openWx) arr.push(3)
      data.pay_method = arr.join();
      
      issueorderlist(Passwordencryption(data)).then(res => {

            this.$message.success("操作成功");
            this.$router.push('/fabitransaction');

      })
    },
    cancelOrder(id){
      revokeorder({order_no: id, order_type: '2'}).then((res) => {
          
            this.$message.success("操作成功");
            this.getList()
           
      });
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  .buy{
    width: 1280px;
    margin: 0 auto;
    color: #999;
    .container{
      width: 980px;
      margin: 0 auto;
      overflow: hidden;
      .header{
        text-align: center;
        margin: 50px 0;
        h2{
          font-size: 36px;
          color: #fff;
        }
        h3{
          font-size: 16px;
          color: #BBBBBB;
          margin-top: 20px;
        }
      }
      .input_box{
        .item{
          .label{
            color: #fff;
            font-size: 16px;
            line-height: 50px;
          }
          .row{
            display: flex;
            justify-content: space-between;
            .input{
              width: 48%;
            }
          }
          .input{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
            background-color: #131C28;
            input{
              width: 80%;
              height: 50px;
              background-color: #131C28;
              border-radius: 4px;
              color: #fff;
              font-size: 16px;
            }
          }
        }
        .payway{
          .label{
            color: #fff;
            font-size: 16px;
            line-height: 50px;
          }
          .tabs{
            display: flex;
            justify-content: space-between;
            .tab_item{
              width: 30%;
              height:42px;
              line-height: 42px;
              background:rgba(19,28,40,1);
              text-align: center;
              &.active{
                border: 1px solid #6185E5;
                color: #6185E5;
              }
              img{
                vertical-align: middle;
                margin-right: 10px;
              }
            }
          }
        }
        .btn button{
          margin-top: 50px;
          width: 100%;
        }
      }
    }
    .trade_list{
      margin-top: 50px;
      .title{
        margin-bottom: 40px;
        span{
          color: #fff;
          font-size: 32px;
        }
        a{
          float: right;
          color: #6185E5;
          font-size: 16px;
          margin-top: 20px;
        }
      }
    }
  }
</style>
